<template>
  <div class="map-container">
    <div class="gnssBg">GNSS导航卫星完好性监测系统</div>
    <!-- 地图容器 -->
    <div ref="chartRef" class="chart-container"></div>

    <!-- 加载状态提示（新增，提升用户体验） -->
    <!-- <div v-if="isLoading" class="loading-mask">
      <div class="spinner"></div>
      <p>地图加载中...</p>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
// 按需引入ECharts核心模块，减少打包体积
import * as echarts from "echarts/core";
import { GeoComponent, TooltipComponent } from "echarts/components";
// 导入折线图组件
import { MapChart, ScatterChart, LinesChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { airportsApi, getWayPointsApi } from "@/api/home";

// 注册所需模块（仅保留必要组件）
echarts.use([
  GeoComponent,
  MapChart,
  ScatterChart,
  LinesChart,
  CanvasRenderer,
  TooltipComponent,
]);

// 组件状态
const chartRef = ref(null);
const chart = ref(null);
const isReady = ref(false);
// const isLoading = ref(true); // 加载状态管理

// 地图常量配置（非响应式，减少Proxy开销）
const MAP_CONFIG = {
  center: [105, 30],
  zoom: 1.2,
  backgroundColor: "transparent",
  areaColor: "#e6f7ff",
  // borderColor: "#91cc75",
  borderWidth: 1,
  borderColor: "rgba(0, 0, 0, 0.2)", // 边界线半透明
  // 修复：明确定义为经纬度数组 [经度, 纬度]
  beijingCoord: [116.4, 39.9], // 北京地理中心点坐标
};

// 异步加载地图数据（核心优化：避免阻塞主线程）
const loadMapData = async () => {
  try {
    // 动态导入JSON，避免打包到主JS
    const { default: chinaJson } = await import("@/assets/china.json");
    echarts.registerMap("china", chinaJson);
    return true;
  } catch (error) {
    console.error("地图数据加载失败:", error);
    return false;
  }
};

// 初始化图表
const initChart = () => {
  if (!isReady.value || !chart.value) return;
  const option = {
    backgroundColor: MAP_CONFIG.backgroundColor,
    tooltip: { show: false },
    geo: {
      map: "china",
      show: true,
      roam: false, // 禁止缩放平移（根据需求调整）
      center: MAP_CONFIG.center,
      zoom: MAP_CONFIG.zoom,
      label: { show: false },
      itemStyle: {
        areaColor: MAP_CONFIG.areaColor,
        borderColor: MAP_CONFIG.borderColor,
        borderWidth: MAP_CONFIG.borderWidth,
      },
    },
    series: [],
  };
  chart.value.setOption(option);

  // 调用-获取所有机场信息接口 airportsApi
  getAirportsApi();
};
// 绘制所有机场
const getAirportsApi = async () => {
  const { code, data } = await airportsApi();
  if (code === 200) {
    const newArrs = data.map((item) => ({
      name: item.city, // 取原对象的 "city" 字段作为新对象的 "name"
      value: [item.longitude, item.latitude], // 经纬度数组（注意顺序：经度在前，纬度在后）
    }));
    // 绘制机场标识
    airportCoordinates(newArrs);
  }
};
const airportCoordinates = (newArrs) => {
  const scatterSeries = {
    type: "scatter",
    coordinateSystem: "geo",
    name: "机场位置",
    data: newArrs,
    symbol: "circle",
    symbolSize: 10,
    itemStyle: { color: "#ff4d4f", borderColor: "#fff", borderWidth: 2 },
    emphasis: { symbolSize: 12, itemStyle: { color: "#ff0000" } },
  };

  // 追加系列：仅更新series，触发散点局部渲染
  chart.value.setOption({
    series: [...chart.value.getOption().series, scatterSeries], // 保留原有series，追加新系列
  });
  // 获取航路
  getWayPoints();
};

// 从接口获取航路数据并转换格式
const getWayPoints = async () => {
  try {
    const { code, data: rawData } = await getWayPointsApi(); // 你的航路接口
    if (code === 200) {
      // 关键：每条线路的 coords 必须是二维数组 [[lon1,lat1], [lon2,lat2], ...]
      const lineData = rawData.map((outerItem) => ({
        name: outerItem.name, // 线路名称（如 "1-"、"111-222"）
        // coords：二维数组，每个子数组是一个航点的经纬度
        coords: outerItem.wayPoints.map((point) => [
          point.longitude, // 单个点的经度
          point.latitude, // 单个点的纬度
        ]),
      }));

      console.log("修正格式后的航路数据:", lineData);
      wayPointsCoordinates(lineData); // 绘制多条航路
    }
  } catch (error) {
    console.error("获取航路数据失败:", error);
  }
};
// 绘制多条航路（每条航路对应一个 lines 系列）
const wayPointsCoordinates = (lineData) => {
  if (!isReady.value || !chart.value) return;

  // 为每条航路创建独立的 lines 系列
  const lineSeriesList = lineData.map((line, index) => {
    // 差异化颜色（避免多条线路颜色重复）
    const colors = ["#1890ff", "#52c41a", "#ff4d4f", "#fa8c16", "#722ed1"];
    const lineColor = colors[index % colors.length];

    return {
      type: "lines", // 6.x 地理线路必须用 lines 类型
      coordinateSystem: "geo", // 绑定地理坐标系
      geoIndex: 0, // 关联第0个 geo 组件
      polyline: true, // 关键：开启多段线，按 coords 顺序连接所有点
      name: line.name, // 线路名称（用于 tooltip）
      data: [
        {
          // 核心：coords 是二维数组 [[lon1,lat1], [lon2,lat2], ...]
          coords: line.coords,
          // 可选：为当前线路添加额外信息（如 tooltip 显示）
          lineName: line.name,
        },
      ],
      symbol: ["none", "none"], // 隐藏线路首尾的标记点
      lineStyle: {
        color: lineColor,
        width: 2,
        type: "solid",
        opacity: 0.8, // 避免线路遮挡地图
      },
      // 自定义 tooltip 显示（可选）
      tooltip: {
        formatter: (params) => `
          <div style="padding: 5px;">
            <div style="font-weight: 600;">${params.data.lineName}</div>
            <div>经纬度：${params.value[0].toFixed(
              2
            )}, ${params.value[1].toFixed(2)}</div>
          </div>
        `,
      },
    };
  });

  // 追加所有线路系列到图表
  const existingSeries = chart.value.getOption().series || [];
  chart.value.setOption({
    series: [...existingSeries, ...lineSeriesList],
  });
};

// 组件挂载时初始化
onMounted(() => {
  // 延迟初始化，优先保证页面框架渲染
  const initTimer = setTimeout(() => {
    clearTimeout(initTimer);
    nextTick(async () => {
      if (!chartRef.value) return;
      // 1. 初始化ECharts实例（轻量操作）
      chart.value = echarts.init(chartRef.value, null, {
        renderer: "canvas", // 强制使用Canvas渲染，性能更优
        useDirtyRect: true, // 启用脏矩形渲染，减少重绘区域
      });
      // 2. 异步加载地图数据
      const dataLoaded = await loadMapData();
      if (!dataLoaded) {
        // isLoading.value = false;
        return;
      }
      // 3. 完成初始化
      isReady.value = true;
      initChart();
      // isLoading.value = false;
    });
  }, 100); // 100ms延迟，平衡首屏速度和初始化时机
});

// 监听容器尺寸变化，自适应调整
watch(
  () => chartRef.value?.clientWidth,
  (newWidth) => {
    if (newWidth && isReady.value) {
      chart.value.resize({
        animation: { duration: 300 }, // 平滑过渡
      });
    }
  }
);

// 窗口大小变化时额外处理
const handleWindowResize = () => {
  if (isReady.value) chart.value.resize();
};

window.addEventListener("resize", handleWindowResize);

// 组件卸载时清理资源
onUnmounted(() => {
  window.removeEventListener("resize", handleWindowResize);
  if (chart.value) {
    chart.value.dispose();
    chart.value = null;
  }
  isReady.value = false;
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 920px;
  float: left;
  height: calc(100vh - 330px);
  .gnssBg {
    text-indent: 40px;
    color: #fff;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    line-height: 42px;
    margin-top: 25px;
    margin-left: 24px;
    width: 436px;
    height: 42px;
    background-image: url("../../../assets/images/home/GNSSBg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

.chart-container {
  width: 920px;
  height: 100%;
}
</style>
